<template>
  <div class="set-fund-pwd_mod" :class="themeClass">
    <v-loading v-if="loading" />
    <v-nav :title="$t('UpdateLoginPwd.Change login password')"></v-nav>
    <div class="set-fund-pwd_mod_box">
      <div class="moomoo_form">
        <div class="moomoo_form_input">
          <p>{{ $t('UpdateLoginPwd.original password') }}</p>
          <van-field class="input" v-model="form.origin_password" :type="view_oldPwd ? '' : 'password'" :placeholder="$t('UpdateLoginPwd.Please enter original password')" />
          <van-icon :name="view_oldPwd ? 'eye-o' : 'closed-eye'" @click="viewPwd('view_oldPwd')" />
        </div>
        <div class="moomoo_form_input">
          <p>{{ $t('UpdateLoginPwd.New Password') }}</p>
          <van-field class="input" v-model="form.new_password" :type="view_newPwd ? '' : 'password'" :placeholder="$t('UpdateLoginPwd.Please enter a new password')" />
          <van-icon :name="view_newPwd ? 'eye-o' : 'closed-eye'" @click="viewPwd('view_newPwd')" />
        </div>
        <div class="moomoo_form_input">
          <p>{{ $t('UpdateLoginPwd.Confirm the new password') }}</p>
          <van-field class="input" v-model="confirm_password" :type="view_confirmPwd ? '' : 'password'" :placeholder="$t('UpdateLoginPwd.Please enter to confirm new password')" />
          <van-icon :name="view_confirmPwd ? 'eye-o' : 'closed-eye'" @click="viewPwd('view_confirmPwd')" />
        </div>
        <div class="moomoo_form_submit">
          <van-button color="#DAAB51" @click="confirmSubmit">{{ $t('UpdateLoginPwd.Confirm the changes') }}</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'updatepwd',
  data() {
    return {
      form: {
        origin_password: '',
        new_password: ''
      },
      confirm_password: '',
      view_oldPwd: false,
      view_newPwd: false,
      view_confirmPwd: false,
      isDayTime: false,
      loading: false
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  methods: {
    viewPwd(type) {
      this[type] = !this[type]
    },
    async confirmSubmit() {
      if (this.form.origin_password.trim() === '') {
        this.$toast(this.$t('UpdateLoginPwd.Please enter original password'))
        return
      }
      if (this.form.new_password.trim() === '') {
        this.$toast(this.$t('UpdateLoginPwd.Please enter a new password'))
        return
      }
      if (this.confirm_password.trim() === '') {
        this.$toast(this.$t('UpdateLoginPwd.Please enter to confirm new password'))
        return
      }
      if (this.form.new_password.trim() !== this.confirm_password.trim()) {
        this.$toast(this.$t('UpdateLoginPwd.The new password is inconsistent'))
        return
      }

      if (this.form.new_password.trim() === this.form.origin_password.trim()) {
        this.$toast(this.$t('UpdateLoginPwd.The new password cannot be the same as the original password'))
        return
      }

      this.loading = true
      await this.$https.post('/user/changePassword', this.form).then(res => {
        if (res != undefined && res.code == 1) {
          this.$router.push('/mine')
        }
      })
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
@import url('../SetFundPassword/index.less');
</style>
